<template>
  <el-popover
    :width="width==null?220:width"
    v-model="visible"
    :placement="bottom==null?'bottom':bottom"
  >
        <template v-if="findParams!=null" >
          <span class="pointer" slot="reference">
            {{flag!=null?flag:findParams.label}}
            <span :class="calcClassType" class="mg-i-filter"></span>
          </span>
          <!-- 输入框筛选过滤 -->
          <el-row v-if="findParams.type==1">
            <el-col :span="12">
              <el-input size="mini" :placeholder="findParams.label" v-model="findParams.params.value" clearable></el-input>
            </el-col>
            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="11">
              <el-select size="mini" @clear="handleClear(findParams)"  v-model="findParams.params.condition" placeholder="请选择"  clearable>
                <el-option v-for="(x,index) in findParams.conditions.options" :key="index" :label="x.alias" :value="x.opt"></el-option>
              </el-select>
            </el-col>
          </el-row>
          <!-- 时间筛选过滤 -->
          <div v-else-if="findParams.type==2">

            <el-row :class="{'margin-top-10':index!=0}" v-for="(x,index) in findParams.filter" :key="index">
              <el-col :span="24">
                <el-date-picker :editable="false" size="mini" style="width:100%" type="datetime" :placeholder="x.label" :default-time="x.value" value-format="yyyy-MM-dd HH:mm:ss" v-model="x.params.value"/>
              </el-col>

              <el-col :span="24">
                <el-select @clear="handleClear(x)" size="mini" style="width:100%"  v-model="x.params.condition" placeholder="请选择"  clearable>
                  <el-option v-for="(y,key) in x.conditions.options" :key="key" :label="y.alias" :value="y.opt"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
          <!-- 下拉框筛选过滤 -->
          <el-row v-else-if="findParams.type==3">
            <el-col :span="24">
              <el-select @clear="handleClear(findParams)" size="mini"  v-model="findParams.params.value" placeholder="请选择"  clearable>
                <el-option  v-for="(x,index) in findParams.conditions.options" :key="index" :label="x.alias" :value="x.opt"></el-option>
              </el-select>
            </el-col>
          </el-row>
          <!-- 排序下拉选项 -->
          <div class="margin-top-10"></div>
          <el-row v-if="findParams.orderBy.state==1">
            <el-col :span="6" style="line-height:28px;">
              <h4>排 序</h4>
            </el-col>
            <el-col :span="18">
              <el-select @change="alert" @clear="handleClearOrderBy(findParams)" size="mini"  v-model="findParams.orderBy.value" placeholder="请选择"  clearable>
                <el-option  v-for="(x,index) in findParams.orderBy.options" :key="index" :label="x.alias" :value="x.opt"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </template>
        <div style="text-align: right;">
          <el-button size="mini" type="text" @click.stop="visible = false">取消</el-button>
          <el-button type="text" size="mini" @click.stop="toSearch">确定</el-button>
        </div>
  </el-popover>
</template>
<script>
  export default {
    name: "template_proper_search",
    data() {
      return {
        visible: false
      }
    },
    computed:{
      calcClassType(){
        var flag=false;
        if(this.findParams.type==2){
          for(var i =0;i<this.findParams.filter.length;i++){
              if(!this.proUtil.isEmpty(this.findParams.filter[i].params.value)||(this.findParams.orderBy.state==1&&this.findParams.orderBy.value!='')){
                flag=true;
              }
          }
        }else{
          if(!this.proUtil.isEmpty(this.findParams.params.value)||(this.findParams.orderBy.state==1&&this.findParams.orderBy.value!='')){
                flag=true;
          }
        }
        return flag?'active_filter':'';
      }
    },
    props: ['findParams','width','bottom','flag'],
    methods:{
      alert(x){
        // console.log(x);
      },
      toSearch(){
        this.$emit("toSearchFilter");
        this.visible=false;
      },
      handleClear(tag) {
        if(tag.type==3){
          if(tag.params.value!=""){
            tag.params.value="";
            this.toSearch();
          }else{
            tag.params.value="";
          }
        }else{
          if(tag.params.value!=""){
            tag.params.value="";
            tag.params.condition=tag.conditions.options[0].opt;
            this.toSearch();
          }else{
            tag.params.value="";
            tag.params.condition=tag.conditions.options[0].opt;
          }
        }
      },
      handleClearOrderBy(tag) {
        if(tag.orderBy.state==1){
          tag.orderBy.value="";
        }
      }
    },
    updated(){
    }
  }
</script>

<style scoped>
.active_filter{
  color:#66b1ff
}
.el-select-dropdown__item {
  font-size: 12px;
}
.pointer{
  cursor:pointer
}
.margin-top-10{
  margin-top:10px
}

</style>
